// import ConfirmModal from '@/components/ConfirmModal';
import { specialCharReg } from '@/utils/utils';
import { WarningFilled } from '@ant-design/icons';
import {
  ProCard,
  ProForm,
  ProFormDigit,
  ProFormGroup,
  ProFormText,
  FooterToolbar,
} from '@ant-design/pro-components';
import { message, Result } from 'antd';
import { useEffect, useState } from 'react';
// import CreateEtc from './components/CreateEtc';
import { queryETCList, updateETC } from '../service';
import { ETCTableItem } from '../types.d';

const ETCConfig = () => {
  const [etcItem, setEtcItem] = useState<ETCTableItem>();

  useEffect(() => {
    queryETCList({}, {}).then((res) => {
      if (res.success) {
        setEtcItem(res?.data[0]);
      }
    });
  }, []);
  return (
    <ProCard>
      {etcItem ? (
        <ProForm<ETCTableItem>
          title="ETC平台配置"
          layout="vertical"
          style={{ margin: '0 auto', width: '70%' }}
          initialValues={{
            platId: etcItem?.platId,
            platName: etcItem?.platName,
            maxAmount: (etcItem?.maxAmount || 0) / 100,
            apiKey: etcItem?.apiKey,
            merchantId: etcItem?.merchantId,
            // uuid: etcItem?.uuid,
            refundUrl: etcItem?.refundUrl,
            baseUrl: etcItem?.baseUrl,
            apiVersion: etcItem?.apiVersion,
            appId: etcItem?.appId,
            secret: etcItem?.secret,
          }}
          submitter={{
            searchConfig: {
              submitText: '保存配置',
            },
            render: (_, dom) => <FooterToolbar>{dom}</FooterToolbar>,
          }}
          onFinish={async (values) => {
            if (!etcItem) return false;
            const res = await updateETC(etcItem?._id, values);
            if (res.success) {
              message.success({
                content: res.message,
                key: 'update_etc',
              });
              return true;
            }
            message.error({
              content: res?.message,
              key: 'update_etc',
            });
            return false;
          }}
        >
          <ProFormGroup>
            <ProFormText name="platId" label="ETC厂商ID" disabled width="md" />
            <ProFormText
              required
              name="platName"
              label="ETC厂商名称"
              width="xl"
              rules={[
                {
                  required: true,
                  validator: (_, val) => {
                    if (!val || specialCharReg.test(val))
                      return Promise.reject(new Error('ETC厂商名称不符合规范，不支持包含特殊字符'));
                    return Promise.resolve(val);
                  },
                },
              ]}
            />
          </ProFormGroup>
          <ProFormGroup>
            <ProFormDigit
              width="md"
              name="maxAmount"
              label="最大助缴金额(元)"
              min={0}
              fieldProps={{ precision: 2 }}
            />
            <ProFormText width="xl" name="apiVersion" label="接口版本" />
          </ProFormGroup>

          <ProFormText wrapperCol={{ span: 22 }} name="baseUrl" label="助缴接口地址" />
          <ProFormText wrapperCol={{ span: 22 }} name="refundUrl" label="退款接口地址" />

          <ProFormText wrapperCol={{ span: 22 }} name="apiKey" label="apiKey" />
          <ProFormText wrapperCol={{ span: 22 }} name="merchantId" label="merchantId" />
          {/* <ProFormText wrapperCol={{ span: 22 }} name="uuid" label="uuid" /> */}
          <ProFormText wrapperCol={{ span: 22 }} name="appId" label="appId" />
          <ProFormText wrapperCol={{ span: 22 }} name="secret" label="secret" />
        </ProForm>
      ) : (
        <Result icon={<WarningFilled />} title="暂无数据" />
      )}
    </ProCard>
  );
};

export default ETCConfig;
